<template>
 <div id="popup_tree_input">
    <el-popover ref="popover" :placement="placement" trigger="click">
      <el-input placeholder="请输入内容" v-model="filterText"> </el-input>
      <el-tree
        style="width: 300px; height: 400px; overflow: scroll"
        class="selectMultipleClass"
        :data="data"
        :props="props"
        node-key="id"
        ref="popupTree"
        @current-change="currentChangeHandle"
        :default-expand-all="defaultExpandAll"
        :accordion="accordion"
        :highlight-current="highlightCurrent"
        :expand-on-click-node="true"
        check-strictly
        :filter-node-method="filterNode"
      >
      </el-tree>
    </el-popover>
    <el-input
      v-model="currentNode"
      v-popover:popover

      :readonly="true"
      :placeholder="placeholder"
      style="cursor: pointer; width: 280px"
    ></el-input>
  </div>
</template>

<script>

export default {
  name: "PopupTreeInput",
  props: {
    data: {
      type: Array,
      default: [],
    },
    props: {
      type: Object,
      default: {},
    },
    currentNode: {
      type: String,
      default: "",
    },
    nodeKey: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "点击选择内容",
    },
    placement: {
      type: String,
      default: "bottom",
    },
    defaultExpandAll: {
      type: Boolean,
      default: false,
    },
    accordion: {
      type: Boolean,
      default: true,
    },
    highlightCurrent: {
      type: Boolean,
      default: true,
    },
    currentChangeHandle: {
      type: Function,
      default: null,
    },
  },
  data() {


    return {
      filterText: "",
     
      defaultProps: {
        children: "children", //代表children为子级
        name: "name", //根据name渲染tree列表
      },
    };
  },
  watch: {
  	//监听输入框的内容（进行搜索）
    filterText(val) {
      this.$refs.popupTree.filter(val);
    },
  },
  methods: {
  	//对树节点进行筛选时执行的方法
    filterNode(value, data) {
      console.log("value", value, "data", data);
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

   


  },
};
</script>
